 <template>
  <div>
    <el-card class="box-card" style="width:80%;" v-if="newCardData.length != 0">
      <div class="table-container">
        <table>
          <tr>
            <td class="title-style" style="width: 20px;">#</td>
            <td class="title-style" style="">图片</td>
            <td class="title-style" style="">语音</td>
            <td class="title-style" style="">文字</td>
            <td class="title-style" style="width: 200px;">操作</td>
          </tr>
          <tr v-for="(item, index) in newCardData" :key="index" class="line-style">
            <td class="title-style" style="width: 20px;">{{index + 1}}</td>
            <!-- 图片 -->
            <td class="title-style" style="width: 200px;">
              <el-upload
                class="avatar-uploader"
                :action="uploadUrl"
                :show-file-list="false"
                accept=".gif, .jpg, .jpeg, .bmp, .png"
                :data="token"
                :on-success="handleImageSuccess"
              >
                <img v-if="item.img" @click="chooseId = index" :src="item.img" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </td>

            <!-- 语音 -->
            <td class="title-style" style="width: 200px;">
              <audio
                @ended="item.isPlay = !item.isPlay"
                :ref="item.audios[currentCode]"
                :src="item.audios[currentCode]"
              ></audio>
              <div class="audio-style">
                <span class="text" v-show="!item.audios[currentCode]">暂无音频</span>
                <el-progress
                  v-show="percentage !== 0 && percentage !== 100  && chooseId === index"
                  :percentage="percentage"
                ></el-progress>
                <el-upload
                  :action="uploadUrl"
                  accept="audio/mpeg, audio/ogg, application/ogg,audio/wav"
                  :on-success="handleAudioSuccess"
                  icon="el-icon-picture"
                  :show-file-list="booleanFalse"
                  :on-progress="progressChange"
                  :data="audioToken"
                >
                  <el-button @click="chooseId = index" icon="el-icon-refresh icon">上传音频</el-button>
                </el-upload>

                <img
                  class="horn-img"
                  v-show="item.audios[currentCode]"
                  :src="item.isPlay ? play : pause"
                  @click="playAudio(index)"
                >
              </div>
            </td>

            <!-- 文本 -->
            <td class="title-style" style="width: 200px;">
              <el-input
                autofocus="true"
                placeholder="请输入内容"
                v-model="item.names[currentCode]"
                v-show="item.isEdit"
                @blur="item.isEdit = !item.isEdit"
              ></el-input>
              <div v-show="!item.isEdit">
                <el-tooltip class="item" effect="dark" content="点击重新编辑文本" placement="top-start">
                  <i class="el-icon-edit" @click="item.isEdit = !item.isEdit"></i>
                </el-tooltip>
                {{item.names[currentCode]}}
              </div>
            </td>
            <td class="title-style" style="width: 200px;">
              <el-popover placement="top" width="160" v-model="item.isDelete">
                <p>确定删除吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="item.isDelete = false">取消</el-button>
                  <el-button class="add-style" type="primary" size="mini" @click="removeItem(index)">确定</el-button>
                </div>
                <el-button type="danger" slot="reference">删除</el-button>
              </el-popover>
            </td>
          </tr>
        </table>
      </div>
    </el-card>
  </div>
</template>

<script>
import horn from "../../../images/horn.png";
import hornGif from "../../../images/twinkling.gif";
import { getQiNiuToken, getAudioToken } from "src/util/uploadToken";
import {
  huaweiuploadUrl,
  quniuUploadUrl,
  quniudownHost,
  uploadUrl,
  quniuAudioDownHost
} from "src/config/env.js"; // [华为云] [七牛云] [下载地址] [七牛云下载地址] [本地图片上传]

export default {
  data() {
    return {
      chooseId: -1, //当前上传图片或音频的序号
      searchData: "",
      visible2: false, //删除提示是否显示
      pause: horn, // 音频暂停
      play: hornGif, // 音频播放
      uploadUrl: quniuUploadUrl, //图片上传地址
      isHideAudioName: false, // 在上传音频时，隐藏当前文件名
      booleanFalse: false,
      percentage: 0, //上传文件的进度条百分比
      token: { Authorization: "" }, // 上传图片需要添加token
      audioToken: { token: "" }, // 音频上传携带的token 【七牛云】
      newCardData: this.cardData //卡片列表信息
    };
  },
  watch: {
    cardData: {
      handler: function(newVal, oldVal) {
        this.newCardData = newVal;
      },
      deep: true
    },
    newCardData: {
      handler: function(newVal, oldVal) {
        this.$emit("update:cardData", newVal);
      },
      deep: true
    }
  },
  props: {
    cardData: {
      type: Array,
      default() {
        return [];
      }
    },
    currentCode: { type: String, default: "" }
  },
  mounted() {
    this.token = { token: getQiNiuToken() }; // 图片上传携带的token 【七牛云】
    this.audioToken = { token: getAudioToken() }; // 音频上传携带的token 【七牛云】
  },
  methods: {
    handleImageSuccess(res, file) {
      let img = quniudownHost + res.key + "/wm.jpg";
      this.newCardData[this.chooseId].img = img;
    },
    removeItem(index) {
      this.newCardData[index].isDelete = false;
      var data = this.newCardData;
      data.splice(index, 1);

      this.newCardData = data;
    },
    playAudio(index) {
      let item = this.newCardData[index],
        name = item.audios[this.currentCode];
      let audioRef = this.$refs[name] && this.$refs[name][0];

      if (audioRef.paused) {
        audioRef.play();
      } else {
        audioRef.pause();
      }

      item.isPlay = !item.isPlay;
    },
    handleAudioSuccess(res, file) {
      // this.$alert('')
      let index = this.chooseId;
      let code = this.currentCode;
      var item = this.newCardData[index];
      item.audios[code] = quniuAudioDownHost + res.key;
      // this.newCardData[index].audios[code] = quniuAudioDownHost + res.key;  // 直接修改数组索引的值无效,导致视图无法即时更新（vue无法监控）
      this.$set(this.newCardData, index, item);
    },

    // 单个音频上传进度条
    progressChange(event, file, fileList) {
      this.percentage = Math.round(event.percent);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";

.title-style {
  color: #999;
  text-align: center;
  height: 40px;
}

.img-style {
  height: 80px;
  width: 80px;
}

.audio-style {
  height: 26px;
  line-height: 26px;
  align-items: center;
  display: flex;
  width: 200px;
  justify-content: center;

  .icon:hover {
    cursor: pointer;
  }

  .horn-img {
    height: 26px;
  }

  .horn-img:hover {
    cursor: pointer;
  }
}


//----------------单个图片上传---------------
.avatar-uploader {
  margin: 10px auto;
  cursor: pointer;
  overflow: hidden;
  width: 140px;
  height: 140px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 40px;
  color: #8c939d;
  width: 140px;
  height: 140px;
  line-height: 140px;
  text-align: center;
}
.avatar {
  width: 140px;
  height: 140px;
  display: block;
}
//----------------单个图片上传---------------
</style>
